<template>
	<div class="content-outside">
		<div class="content">
			<h2 v-if="!from">作品登记申请表确认</h2>
			<div class="form_box">
				<div class="form_width">
					<!-- 作品信息 op -->
					<div class="hr" v-if="!from">
						<p>作品信息</p>
					</div>
					<div class="hr hr_w" v-if="from">
						<p>作品登记证书(电子版)订单详情</p>
					</div>
					<div class="status" v-if="from">
						<h4>审核中</h4>
						<p>您申请的作品登记证书（电子版）已提交至中国版权保护中心审核，审核周期为7-10个工作日，请耐心等待。<br />如有任何疑问，请联系客服人员。</p>
					</div>
					
					<div class="bgc" v-if="!from">
						<el-row>
							<el-col :span="24">
								<div class="list">
									<ul>
										<li v-for="item in sample_pic">
											<img :src="item" />
										</li>
									</ul>
								</div>
							</el-col>
						</el-row>
					</div>
					
					<h3>作品基本信息</h3>
					
					<div class="bgc">
						<el-row>
							<el-col :span="12">
								<div class="list">
									<p><span>作品名称：</span>{{ copyrightlist.product_name }}</p>
									<p><span>作者：</span>{{ copyrightlist.product_name }}</p>
									<p><span>权利取得：</span>原始取得</p>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="list list_2">
									<p><span>作品类型：</span>{{ product_type[copyrightlist.product_type] }}</p>
									<p><span>著作权人：</span>{{ copyrightlist.product_name }}</p>
									<p><span>权利归属：</span>个人作品</p>
								</div>
							</el-col>
						</el-row>
					</div>

					<el-row>
						<el-col :span="12">
							<h3>作品创作信息</h3>
						</el-col>
						<el-col :span="12">
							<h3>作品发表信息</h3>
						</el-col>
					</el-row>
					<div class="bgc">
						<el-row>
							<el-col :span="12">
								<div class="list">
									<p><span>创作开始日期：</span>{{ copyrightlist.start_date }}</p>
									<p><span>创作完成日期：</span>{{ copyrightlist.finish_date }}</p>
									<p><span>创作地点：</span>{{ copyrightlist.finish_region + '-' + copyrightlist.finish_city }}</p>
													</div>
												</el-col>
												<el-col :span="12">
													<div class="list list_2">
														<p><span>发表状态：</span>{{ publish_status[copyrightlist.publish_status] }}</p>
														<p><span>首次发表时间：</span>{{ (copyrightlist.publish_date || '--') }}</p>
									<p>
									<span>首次发表地点：</span>{{ (copyrightlist.publish_region ? copyrightlist.publish_region + '-' + copyrightlist.publish_city : '--')
									}}</p>
								</div>
							</el-col>
						</el-row>
					</div>

					<div v-if="from">
						<el-row>
							<el-col :span="12">
								<h3>创作意图</h3>
							</el-col>
							<el-col :span="12">
								<h3>作品独创性</h3>
							</el-col>
						</el-row>
						<div class="bgc">
							<div class="table">
								<table>
									<thead>
									</thead>
									<tbody>
										<tr>
											<td width="50%" class="list_p">为作品补充填写对应的“创作意图和”作品独创性说明，我们将会以此内容为你生成《创作过程说明书》并将作品样本、身份证信息及根据你的作品基本信息生成的其他相关声明一同提交至中国版权中心进行审核</td>
											<td width="50%" class="list_p list_2">为作品补充填写对应的“创作意图和”作品独创性说明，我们将会以此内容</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>

					<p class="warning" v-if="!from">注：请确认准备提交的作品无色情、暴力等违法内容，我们将进行黄赌毒检测</p>
					<!-- 作品信息 ed -->
				</div>
			</div>
			<div class="form_next" v-if="!from">
				<el-button @click="previousStep">返回修改信息</el-button>
				<el-button type="primary" @click="toCertificate">确认并继续</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { look, imgSrc, confirm } from '@/api';
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				from: null,
				copyright_number: null, // 流水号
				imgSrc: imgSrc,
				copyrightlist: {
          
					sample_pic: [], //  作品样本
					product_name: '', //  作品名称
					product_type: '', //   作品类型
          
					// 1文字，2口述，3音乐，4喜剧，5曲艺，6舞蹈，7杂技艺术，8美术，9建筑，10摄影，11模型，12电影，13电影和类似摄制电影方法创作的作品，14工程设计图、产品设计图，15地图、示意图，16,其它
          
					right_obtain_way: '', //  权利取得
					finish_region: '', //   完成省份
					finish_city: '', //  完成城市
					finish_date: '', //   完成时间
          
					publish_status: 0, //   发表状态
					publish_date: '', //  发表时间
					publish_region: '', //  发表省份
					publish_city: '', //  发表城市
          
					start_date: '', // 创作开始时间
					edit_times: '', // 修改次数
				},
        
				// 作品类型选项
        product_type: ['文字', '口述', '音乐', '戏剧', '曲艺', '舞蹈', '杂技艺术', '电影和类似摄制电影方法创作的作品', '工程设计图、产品设计图', '地图、示意图', '其他'],
        
				// 发表状态选项
        publish_status: ['未发表', '已发表'],
				sample_pic: []
			}
		},
		computed: {
			...mapState([
				'croUser',
			]),
		},
		methods: {
			...mapMutations([
				'OUT_LOGIN',
			]),
      
			// 上一步
			previousStep(){
				this.$router.push({
					path: 'copyright',
					query: {
						copyright_number: this.copyright_number,
					}
				});
			},
      
			// 获取已提交数据
			lookFn(){
				let para = {
					copyright_number: this.copyright_number,
					user_id: this.croUser.user_id,
				}
				look(para).then(res => {
					if(res.data){

						this.copyrightlist = res;

						// 若已上传样本设置默认值
						let sample_arr = this.copyrightlist.sample_pic;
						let arr = [];
						let after = null;
						for( let i=0; i<sample_arr.length; i++){
							after = sample_arr[i].substring(sample_arr[i].lastIndexOf('.'));
							if(after == '.png' || after=='.jpg' || after=='.jpeg' || after=='.bmp' || after=='.gif'){
								arr[i] = imgSrc+sample_arr[i];
							}else{
								arr[i] = '';
							}
						}
						this.sample_pic = arr;
						sessionStorage.setItem('sample_pic', data.data.sample_pic)
					
					} else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				});
			},
      
			// 总提交
			toCertificate() {
				//   this.$router.push('/copyRightStep02');
				let para = {
					copyright_number: this.copyright_number,
					user_id: this.croUser.user_id,
				}
				confirm(para).then(data => {
					if (data.data) {
						this.$router.push({path: 'certificate', query: {copyright_number: this.copyright_number}});
						this.$message({
							message: data.msg,
							type: 'success'
						});
					}else {
						this.$message({
							message: data.msg,
							type: 'error'
						});
					}
				})
			},
      
		},
		mounted() {
			this.copyright_number = this.$route.query.copyright_number;
			this.from = this.$route.query.from || null; // 是否是查看订单
			this.lookFn();
			// this.imgCode = verify+'?mobile=18801271672';

		}
	}
</script>
<style lang="scss" scoped>
	.content-outside {
		width: 100%;
		background: #f2f2f2;
		padding: 15px 0;
	}
  
	.content {
		width: 1200px;
		margin: 0px auto;
		box-sizing: border-box;
		padding: 15px;
		background: #fff;
		font-size: 14px;
	}
  
	.content h2 {
		font-size: 23px;
		font-weight: normal;
		padding: 30px 0 50px 0;
		width: 1000px;
		margin: 0 auto;
		text-align: center;
	}
  
  .content h2 > span {
		font-size: 14px;
		padding-left: 10px;
    color: #aaa;
	}
  
	/* hr */
  .content .hr {
		position: relative;
		top: 0;
		left: 0;
		height: 50px;
		border-top: 1px solid #c6c6c6;
		margin-top: 50px;
		margin-bottom: 20px;
	}
  
  .content .hr > p {
		position: relative;
		top: -21px;
		left: 0;
		width: 300px;
		height: 40px;
		line-height: 40px;
		font-size: 21px;
		text-align: center;
		border: 1px solid #c6c6c6;
		border-radius: 3px;
		box-sizing: border-box;
		border-radius: 30px;
		margin: 0 auto;
		background: #fff;
	}
	.content .hr.hr_w>p {
		width:400px;
	}

	.form_box {
		padding: 30px 0;
		background: #f2f2f2;
		border-radius: 10px;
	}
  
	.form_box h3 {
		font-size: 20px;
		height: 30px;
		line-height: 30px;
		font-weight: normal;
		margin: 40px 0 20px 0;
		padding-left: 25px;
		border-left: 5px solid #3D75C9;
	}
  
	.form_next {
		text-align: center;
		padding: 25px 0;
	}
  
	.form_width {
		width: 1000px;
		margin: 0 auto;
		.bgc {
      background: #fff;
			border-radius: 5px;
			box-sizing: border-box;
			font-size: 16px;
			padding: 25px;
		}
		.list_p {
			line-height: 30px;
			padding-right: 25px; 
			text-align: justify;
		}
		.list_p.list_2 {
			padding-right: 0;
		}
		.list {
			p {
				padding: 20px 0;
			}
			span {
				display: inline-block;
				width: 120px;
			}
			li {
				overflow: hidden;
				background-color: #fff;
				border: 1px solid #c0ccda;
				border-radius: 6px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				width: 148px;
				height: 148px;
				margin: 0 8px 8px 0;
				display: inline-block;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.list_2{
			border-left: 1px solid #ccc;
			padding-left: 30px;
		}
		.warning {
			text-align: center;
			color: #FA5555;
			padding: 15px;
		}
	}
	.status {
		text-align: center;
		color: #333;
		padding-bottom: 10px;
		h4 {
			font-size: 18px;
			font-weight: normal;
			line-height: 18px;
			height: 18px;
			padding-bottom: 10px;
		}
		p {
			line-height: 22px;
		}
	}

</style>
